<template>
    <div class="content">
        <div class="title-item">
            <span class="left">境内人群</span>
            <span class="right"> </span>
        </div>
        <div class="content-item">
            <van-row>
<!--                <van-col class="time-item" span="24">-->
<!--                    更新时间：2020-03-28 20:11-->
<!--                </van-col>-->
                <van-col span="6">
                    <van-col class="num color-oranged" span="24">532465</van-col>
                    <van-col class="title-name" span="24">确诊人数</van-col>
                    <van-col class="add-item color-oranged" span="24">较昨日+58906</van-col>
                </van-col>
                <van-col span="6">
                    <van-col class="num color-orange" span="24">444600</van-col>
                    <van-col class="title-name" span="24">疑似人数</van-col>
                    <van-col class="add-item color-orange" span="24">较昨日+49656</van-col>
                </van-col>
                <van-col span="6">
                    <van-col class="num color-green" span="24">62938</van-col>
                    <van-col class="title-name" span="24">治愈人数</van-col>
                    <van-col class="add-item color-green" span="24">较昨日+6414</van-col>
                </van-col>
                <van-col span="6">
                    <van-col class="num color-gray" span="24">24927</van-col>
                    <van-col class="title-name" span="24">死亡人数</van-col>
                    <van-col class="add-item color-gray" span="24">较昨日+2836</van-col>
                </van-col>
            </van-row>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span class="left">境外入沈</span>
            <span class="right"> </span>
        </div>
        <div class="content-item">
            <van-row>
<!--                <van-col class="time-item" span="24">-->
<!--                    更新时间：2020-03-28 20:11-->
<!--                </van-col>-->
                <van-col span="4">
                    <van-col class="num color-oranged" span="24">13676</van-col>
                    <van-col class="title-name" span="24">入沈人数</van-col>
                    <van-col class="add-item color-oranged" span="24">较昨日<br/>+124</van-col>
                </van-col>
                <van-col span="4">
                    <van-col class="num color-orange" span="24">6493</van-col>
                    <van-col class="title-name" span="24">中转人数</van-col>
                    <van-col class="add-item color-orange" span="24">较昨日<br/>+69</van-col>
                </van-col>
                <van-col span="4">
                    <van-col class="num color-green" span="24">210</van-col>
                    <van-col class="title-name" span="24">密接人数</van-col>
                    <van-col class="add-item color-green" span="24"><br/></van-col>
                </van-col>
                <van-col span="4">
                    <van-col class="num color-blue" span="24">13676</van-col>
                    <van-col class="title-name" span="24">隔离人数</van-col>
                    <van-col class="add-item color-blue" span="24">较昨日<br/>+124</van-col>
                </van-col>
                <van-col span="4">
                    <van-col class="num color-gray" span="24">12217</van-col>
                    <van-col class="title-name" span="24">核酸检测</van-col>
                    <van-col class="add-item color-gray" span="24">较昨日<br/>+227</van-col>
                </van-col>
            </van-row>
            <div class="divider" style="margin-bottom: 0;"></div>
        </div>
        <div class="title-item">
            <span class="left">各国来沈人员</span>
            <span class="right"></span>
        </div>
        <div class="table-div">
            <van-row class="table-item">
                <van-col span="1">
                    国家
                </van-col>
                <van-col span="1" class="color-oranged number" >
                    来沈(累计)
                </van-col>
                <van-col span="1" class="color-green number">
                    中转(累计)
                </van-col>
                <van-col span="1" class="color-oranged number">
                    来沈(当日)
                </van-col>
                <van-col span="1" class="color-green number">
                    中转(当日)
                </van-col>
            </van-row>
            <van-row class="table-item">
                <van-col span="1">
                    <van-col span="12">中国</van-col>
                    <van-col span="12" class="national-flag">
                        <img class="hd-img-responsive"
                             src="../../../assets/images/China.jpg"/>
                    </van-col>
                </van-col>
                <van-col span="1" class="color-oranged number">
                    12473
                </van-col>
                <van-col span="1" class="color-green number">
                    -
                </van-col>
                <van-col span="1" class="color-oranged number">
                    110
                </van-col>
                <van-col span="1" class="color-green number">
                    -
                </van-col>
            </van-row>
            <van-row class="table-item">
                <van-col span="1">
                    <van-col span="12">韩国</van-col>
                    <van-col span="12" class="national-flag">
                        <img class="hd-img-responsive"
                             src="../../../assets/images/Korea.jpg"/>
                    </van-col>
                </van-col>
                <van-col span="1" class="color-oranged number">
                    576
                </van-col>
                <van-col span="1" class="color-oranged number">
                    -
                </van-col>
                <van-col span="1" class="color-oranged number">
                    4
                </van-col>
                <van-col span="1" class="color-oranged number">
                    -
                </van-col>
            </van-row>
            <van-row class="table-item">
                <van-col span="1">
                    <van-col span="12">美国</van-col>
                    <van-col span="12" class="national-flag">
                        <img class="hd-img-responsive"
                             src="../../../assets/images/USA.jpg"/>
                    </van-col>
                </van-col>
                <van-col span="1" class="color-oranged number">
                    148
                </van-col>
                <van-col span="1" class="color-oranged number">
                    -
                </van-col>
                <van-col span="1" class="color-oranged number">
                    1
                </van-col>
                <van-col span="1" class="color-oranged number">
                    -
                </van-col>
            </van-row>
            <van-row class="table-item">
                <van-col span="1">
                    <van-col span="12">日本</van-col>
                    <van-col span="12" class="national-flag">
                        <img class="hd-img-responsive"
                             src="../../../assets/images/Japan.jpg"/>
                    </van-col>
                </van-col>
                <van-col span="1" class="color-oranged number">
                    85
                </van-col>
                <van-col span="1" class="color-oranged number">
                    -
                </van-col>
                <van-col span="1" class="color-oranged number">
                    0
                </van-col>
                <van-col span="1" class="color-oranged number">
                    -
                </van-col>
            </van-row>
            <van-row class="table-item">
                <van-col span="1">
                    <van-col span="12">英国</van-col>
                    <van-col span="12" class="national-flag">
                        <img class="hd-img-responsive"
                             src="../../../assets/images/England.jpg"/>
                    </van-col>
                </van-col>
                <van-col span="1" class="color-oranged number">
                    16
                </van-col>
                <van-col span="1" class="color-oranged number">
                    -
                </van-col>
                <van-col span="1" class="color-oranged number">
                    0
                </van-col>
                <van-col span="1" class="color-oranged number">
                    -
                </van-col>
            </van-row>
            <van-row class="table-item">
                <van-col span="1" class="cname">
                    <van-col span="12">意大利</van-col>
                    <van-col span="12" class="national-flag">
                        <img class="hd-img-responsive"
                             src="../../../assets/images/Italy.jpg"/>
                    </van-col>
                </van-col>
                <van-col span="1" class="color-oranged number">
                    3
                </van-col>
                <van-col span="1" class="color-oranged number">
                    -
                </van-col>
                <van-col span="1" class="color-oranged number">
                    0
                </van-col>
                <van-col span="1" class="color-oranged number">
                    -
                </van-col>
            </van-row>
            <van-row class="table-item">
                <van-col span="1">
                    <van-col span="12">伊朗</van-col>
                    <van-col span="12" class="national-flag">
                        <img class="hd-img-responsive"
                             src="../../../assets/images/Iran.jpg"/>
                    </van-col>
                </van-col>
                <van-col span="1" class="color-oranged number">
                    0
                </van-col>
                <van-col span="1" class="color-oranged number">
                    -
                </van-col>
                <van-col span="1" class="color-oranged number">
                    0
                </van-col>
                <van-col span="1" class="color-oranged number">
                    -
                </van-col>
            </van-row>
            <van-row class="table-item">
                <van-col span="1">
                    <van-col span="12">其他</van-col>
                </van-col>
                <van-col span="1" class="color-oranged number">
                    375
                </van-col>
                <van-col span="1" class="color-oranged number">
                    -
                </van-col>
                <van-col span="1" class="color-oranged number">
                    7
                </van-col>
                <van-col span="1" class="color-oranged number">
                    -
                </van-col>
            </van-row>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span class="left">趋势分析</span>
            <span class="right"> </span>
        </div>
        <div class="chart-div">
            <van-row>
                <van-col span="24">
                    <div id="gglsry" class="chart-item-2" style="height:300px;"></div>
                </van-col>
            </van-row>
            <div class="divider"></div>
        </div>
<!--        <div class="table-div">-->
<!--            <van-row class="table-item">-->
<!--                <van-col span="2">-->
<!--                    姓名-->
<!--                </van-col>-->
<!--                <van-col span="3" class="color-oranged">-->
<!--                    密接患者-->
<!--                </van-col>-->
<!--                <van-col span="3" class="color-green">-->
<!--                    来源国家-->
<!--                </van-col>-->
<!--                <van-col span="3" class="color-gray">-->
<!--                    密接方式-->
<!--                </van-col>-->
<!--                <van-col span="3" class="color-gray">-->
<!--                    密接时间-->
<!--                </van-col>-->
<!--                <van-col span="2" class="color-gray">-->
<!--                    现状-->
<!--                </van-col>-->
<!--                <van-col span="3" class="color-gray">-->
<!--                    查看详情-->
<!--                </van-col>-->
<!--            </van-row>-->
<!--            <van-row class="table-item">-->
<!--                <van-col span="3" class="text-left">-->
<!--                    王某某-->
<!--                </van-col>-->
<!--                <van-col span="2" class="color-oranged">-->
<!--                    朋友-->
<!--                </van-col>-->
<!--                <van-col span="3" class="color-green">-->
<!--                    韩国-->
<!--                </van-col>-->
<!--                <van-col span="3" class="color-gray">-->
<!--                    接触-->
<!--                </van-col>-->
<!--                <van-col span="3" class="color-gray">-->
<!--                    03-11-->
<!--                </van-col>-->
<!--                <van-col span="2" class="color-gray">-->
<!--                    隔离-->
<!--                </van-col>-->
<!--                <van-col span="3" class="color-gray">-->
<!--                    详情-->
<!--                </van-col>-->
<!--            </van-row>-->
<!--            <div class="divider"></div>-->
<!--        </div>-->
        <div class="title-item">
            <span class="left">隔离人员</span>
            <span class="right"></span>
        </div>
        <div class="chart-div">
            <van-row>
                <van-col span="24" class="border-divider">
                    <div id="glryJZ" class="chart-item-2" style="height:400px;"></div>
                </van-col>
                <van-col span="24" class="border-divider">
                    <div id="glryJJ" class="chart-item-2" style="height:400px;"></div>
                </van-col>
                <van-col span="24">
                    <div id="glryQS" class="chart-item-2" style="height:300px;"></div>
                </van-col>
            </van-row>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span class="left">隔离宾馆</span>
            <span class="right"> </span>
        </div>
        <div class="chart-div">
            <van-row>
                <van-col span="24">
                    <div id="glbg" class="chart-item-2" style="height:400px;"></div>
                </van-col>
            </van-row>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span class="left">核酸检测</span>
            <span class="right"></span>
        </div>
        <div class="chart-div">
            <van-row>
                <van-col span="24" class="border-divider">
                    <div id="jiance1" class="chart-item-2" style="height:200px;"></div>
                </van-col>
                <van-col span="24">
                    <div id="jiance2" class="chart-item-2" style="height:200px;"></div>
                </van-col>
            </van-row>
            <div class="divider"></div>
        </div>
            <div class="title-item">
                <span class="left">境外入沈情况</span>
                <span class="right"></span>
            </div>
            <div class="chart-div">
                <van-row>
                    <van-col span="24" class="border-divider">
                        <div id="jwrs1" class="chart-item-2" style="height:200px;"></div>
                    </van-col>
                    <van-col span="24" class="border-divider">
                        <div id="jwrs2" class="chart-item-2" style="height:200px;"></div>
                    </van-col>
                    <van-col span="24">
                        <div id="jwrs3" class="chart-item-2" style="height:200px;"></div>
                    </van-col>
                </van-row>
                <div class="divider"></div>
            </div>
        <div class="title-item">
            <span class="left">省内外转运情况</span>
            <span class="right"></span>
        </div>
        <div class="chart-div">
            <van-row>
                <van-col span="24" class="border-divider">
                    <div id="snwzy1" class="chart-item-2" style="height:260px;"></div>
                </van-col>
                <van-col span="24" class="border-divider">
                    <div id="snwzy2" class="chart-item-2" style="height:260px;"></div>
                </van-col>
                <van-col span="24" class="border-divider">
                    <div id="snwzy3" class="chart-item-2" style="height:260px;"></div>
                </van-col>
                <van-col span="24">
                    <div id="snwzy4" class="chart-item-2" style="height:260px;"></div>
                </van-col>
            </van-row>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span class="left">星级宾馆隔离情况</span>
            <span class="right"></span>
        </div>
        <div class="chart-div">
            <van-row>
                <van-col span="24">
                    <div id="xjbggl" class="chart-item-2" style="height:260px;"></div>
                </van-col>
            </van-row>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span class="left">四院北陵院区收治情况</span>
            <span class="right"></span>
        </div>
        <div class="chart-div">
            <van-row>
                <van-col span="24" class="border-divider">
                    <div id="szqk1" class="chart-item-2" style="height:200px;"></div>
                </van-col>
                <van-col span="24" class="border-divider">
                    <div id="szqk2" class="chart-item-2" style="height:200px;"></div>
                </van-col>
                <van-col span="24">
                    <div id="szqk3" class="chart-item-2" style="height:200px;"></div>
                </van-col>
            </van-row>
            <div class="divider"></div>
        </div>

        <!-- 轨迹弹出框-->
        <van-image-preview v-model="show" :images="trackImg"  > </van-image-preview>
    </div>
</template>

<script>
import echarts from 'echarts'
import mapJson from '@/mock/data/210100_full.json'
import { Dialog } from 'vant'
import { findljqgzsNewList, definiteInfoList, qGNationwideList, lNNationwideList, sYNationwideList, mapInfoList, quxianyiqingxinxi, zxtsList } from '@/api/epidemic-surveillance'
export default {
  name: 'index',
  data () {
    return {
      quxianyiqingxinxi: [],
      definiteInfoList: [],
      mapJsonData: mapJson,
      countryItem: [],
      provinceItem: [],
      cityItem: [],
      show: false,
      trackImg: []
    }
  },
  methods: {
    toTracks (url) {
      if (url) {
        this.trackImg = [url]
        this.show = true
      } else {
        Dialog.alert({ message: '暂无轨迹' })
      }
    },
    timestampToTime (timestamp) {
      let date = new Date(timestamp)// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + '-'
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return Y + M + D + h + m + s
    },
    more () {
      this.$router.push({
        name: 'confirmed-personnel'
      })
    },
    gglsry () {
      let myChart = echarts.init(document.getElementById('gglsry'))
      let option = {
        // title: {
        //   text: '确诊人员趋势图'
        // },
        tooltip: {
          trigger: 'axis'
        },
        legend: [
          {
            data: ['来沈', '中转', '密接'],
            bottom: 20
          },
          {
            data: ['隔离', '样本检测数量'],
            bottom: 0
          }
        ],
        grid: {
          left: '3%',
          right: '6%',
          bottom: '15%',
          top: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['03-24', '03-25', '03-26', '03-27', '03-28']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '来沈',
            type: 'line',
            data: [12679, 13061, 13240, 13552, 13676],
            color: '#37a2da'
          },
          {
            name: '中转',
            type: 'line',
            data: [6268, 6259, 6293, 6424, 6493],
            color: '#ff9f7f'
          },
          {
            name: '密接',
            type: 'line',
            data: [],
            color: '#67e0e3'
          },
          {
            name: '隔离',
            type: 'line',
            data: [12679, 13061, 13240, 13552, 13676],
            color: '#9fe6b8'
          },
          {
            name: '样本检测数量',
            type: 'line',
            data: [11070, 11413, 11720, 11990, 12217],
            color: '#ffdb5c'
          }
        ]
      }
      myChart.setOption(option)
    },
    glryJZ () {
      let myChart = echarts.init(document.getElementById('glryJZ'))
      let option = {
        title: {
          text: '集中1981人',
          x: 'center',
          padding: 10,
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: [
          {
            data: ['其他', '单位隔离'],
            bottom: 40
          },
          {
            data: ['预定宾馆隔离', '指定宾馆隔离'],
            bottom: 20
          }
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '20%',
          top: '12%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          axisLabel: {
            interval: 0, // 强制文字产生间隔
            rotate: 0, // 文字逆时针旋转45°
            textStyle: { // 文字样式
              color: 'black',
              fontSize: 12,
              fontFamily: 'Microsoft YaHei'
            }
          },
          data: ['康平', '法库', '新民', '辽中', '苏家屯', '沈北', '于洪', '浑南', '大东', '皇姑', '铁西', '沈河', '和平']
        },
        series: [
          {
            name: '指定宾馆隔离',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              position: 'insideRight'
            },
            color: '#9fe6b8',
            data: [13, 23, 27, 58, 127, 52, 159, 304, 108, 192, 351, 127, 187]
          },
          {
            name: '其他',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              position: 'insideRight',
              formatter: function (params) {
                if (params.value > 0) {
                  return params.value
                } else {
                  return ' '
                }
              }
            },
            color: '#37a2da',
            data: [0, 0, 0, 0, 26, 23, 17, 18, 12, 15, 0, 12, 60]
          },
          {
            name: '单位隔离',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              position: 'insideRight',
              formatter: function (params) {
                if (params.value > 0) {
                  return params.value
                } else {
                  return ' '
                }
              }
            },
            color: '#32c5e9',
            data: [0, 0, 0, 0, 0, 0, 3, 1, 0, 0, 0, 0, 0]
          },
          {
            name: '预定宾馆隔离',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              position: 'right',
              formatter: function (params) {
                if (params.value > 0) {
                  return params.value
                } else {
                  return ' '
                }
              }
            },
            color: '#ff9f7f',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 0, 61]
          }
        ]
      }
      myChart.setOption(option)
    },
    glryJJ () {
      let myChart = echarts.init(document.getElementById('glryJJ'))
      let option = {
        title: {
          text: '居家2851人',
          x: 'center',
          padding: 10,
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: [
          {
            data: ['人数'],
            bottom: 10
          }
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '12%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          axisLabel: {
            interval: 0, // 强制文字产生间隔
            rotate: 0, // 文字逆时针旋转45°
            textStyle: { // 文字样式
              color: 'black',
              fontSize: 12,
              fontFamily: 'Microsoft YaHei'
            }
          },
          data: ['康平', '法库', '新民', '辽中', '苏家屯', '沈北', '于洪', '浑南', '大东', '皇姑', '铁西', '沈河', '和平']
        },
        series: [
          {
            name: '人数',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              position: 'right'
            },
            color: '#32c5e9',
            data: [2, 0, 27, 24, 254, 124, 394, 475, 189, 371, 192, 323, 476]
          }
        ]
      }
      myChart.setOption(option)
    },
    glryQS () {
      let myChart = echarts.init(document.getElementById('glryQS'))
      let option = {
        title: {
          text: '趋势4832人',
          x: 'center',
          padding: 10,
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          data: ['03-24', '03-25', '03-26', '03-27', '03-28']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '12%',
          containLabel: true
        },
        legend: [
          {
            data: ['集中隔离', '居家隔离'],
            bottom: 10
          }
        ],
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '集中隔离',
          data: [1148, 1446, 1593, 1853, 1981],
          type: 'line'
        }, {
          name: '居家隔离',
          data: [4423, 4174, 3519, 3252, 2851],
          color: '#37a2da',
          type: 'line',
          areaStyle: {}
        }]
      }

      myChart.setOption(option)
    },
    glbg () {
      let myChart = echarts.init(document.getElementById('glbg'))
      let option = {
        title: [
          {
            text: '总床位4204',
            x: 'left',
            padding: 20,
            textStyle: {
              fontSize: 12,
              color: '#ff9f7f'
            }
          },
          {
            text: '已用床位2340',
            x: 'center',
            padding: 20,
            textStyle: {
              fontSize: 12,
              color: '#9fe6b8'
            }
          },
          {
            text: '剩余床位1864',
            x: 'right',
            padding: 20,
            textStyle: {
              fontSize: 12,
              color: '#37a2da'
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          left: '3%',
          right: '6%',
          bottom: '8%',
          top: '12%',
          containLabel: true
        },
        legend: [
          {
            data: ['已用床位', '剩余床位', '宾馆数量'],
            bottom: 10
          }
        ],
        xAxis: [
          {
            type: 'category',
            data: ['市本级', '市中转', '和平', '沈河', '铁西', '皇姑', '大东', '浑南', '于洪', '沈北', '苏家屯', '辽中', '新民', '法库', '康平'],
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              interval: 0, // 强制文字产生间隔
              rotate: 45, // 文字逆时针旋转45°
              textStyle: { // 文字样式
                color: 'black',
                fontSize: 12,
                fontFamily: 'Microsoft YaHei'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 1200,
            interval: 200,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            min: 0,
            max: 7,
            interval: 1,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '已用床位',
            type: 'bar',
            data: [55, 663, 182, 181, 316, 151, 103, 261, 134, 49, 106, 70, 33, 20, 16],
            color: '#9fe6b8'
          },
          {
            name: '剩余床位',
            type: 'bar',
            color: '#37a2da',
            data: [38, 342, 198, 169, 159, 210, 93, 73, 128, 119, 59, 53, 50, 115, 58]
          },
          {
            name: '宾馆数量',
            type: 'line',
            yAxisIndex: 1,
            color: '#ff9f7f',
            data: [1, 6, 3, 6, 4, 5, 4, 2, 4, 2, 3, 1, 2, 2, 2]
          }
        ]
      }

      myChart.setOption(option)
    },
    jiance1 () {
      let myChart = echarts.init(document.getElementById('jiance1'))
      let option = {
        title: {
          text: '当日154人',
          x: 'center',
          padding: 10,
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          orient: 'vertical',
          right: 70,
          top: 70,
          data: ['阴性', '阳性', '待回报']
        },
        color: [ '#37a2da', 'red', 'orange', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '70%',
            center: ['35%', '55%'],
            data: [
              { value: 112, name: '阴性' },
              { value: 0, name: '阳性' },
              { value: 42, name: '待回报' }
            ],
            label: {
              normal: {
                show: false,
                position: 'inside',
                formatter: '{b}:{d}%'
              }
            }
          }
        ]
      }

      myChart.setOption(option)
    },
    jiance2 () {
      let myChart = echarts.init(document.getElementById('jiance2'))
      let option = {
        title: {
          text: '累计12217人',
          x: 'center',
          padding: 10,
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          orient: 'vertical',
          right: 70,
          top: 70,
          data: ['阴性', '阳性', '待回报']
        },
        color: [ '#37a2da', 'red', 'orange', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '70%',
            center: ['35%', '55%'],
            data: [
              { value: 12161, name: '阴性' },
              { value: 5, name: '阳性' },
              { value: 50, name: '待回报' }
            ],
            label: {
              normal: {
                show: false,
                position: 'inside',
                formatter: '{b}:{d}%'
              }
            }
          }
        ]
      }

      myChart.setOption(option)
    },
    jwrs1 () {
      let myChart = echarts.init(document.getElementById('jwrs1'))
      let option = {
        title: {
          text: '当日来源方式',
          x: 'center',
          padding: 10,
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: [
          {
            orient: 'vertical',
            right: 50,
            top: 50,
            data: ['沈阳机场', '火车', '大连机场', '飞机', '其他']
          }
        ],
        color: [ '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '70%',
            center: ['35%', '55%'],
            data: [
              { value: 48, name: '沈阳机场' },
              { value: 1, name: '大连机场' },
              { value: 60, name: '飞机' },
              { value: 0, name: '火车' },
              { value: 0, name: '其他' }
            ],
            label: {
              normal: {
                show: false,
                position: 'inside',
                formatter: '{b}:{d}%'
              }
            }
          }
        ]
      }

      myChart.setOption(option)
    },
    jwrs2 () {
      let myChart = echarts.init(document.getElementById('jwrs2'))
      let option = {
        title: {
          text: '当日来源方式',
          x: 'center',
          padding: 10,
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: [
          {
            orient: 'vertical',
            right: 30,
            top: 30,
            data: ['居家隔离', '单位隔离', '解除隔离', '其他隔离', '指定宾馆隔离', '预订宾馆隔离']
          }
        ],
        color: [ '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '70%',
            center: ['35%', '55%'],
            data: [
              { value: 2, name: '居家隔离' },
              { value: 0, name: '单位隔离' },
              { value: 1, name: '预订宾馆隔离' },
              { value: 0, name: '其他隔离' },
              { value: 115, name: '指定宾馆隔离' },
              { value: 0, name: '解除隔离' }
            ],
            label: {
              normal: {
                show: false,
                position: 'inside',
                formatter: '{b}:{d}%'
              }
            }
          }
        ]
      }

      myChart.setOption(option)
    },
    jwrs3 () {
      let myChart = echarts.init(document.getElementById('jwrs3'))
      let option = {
        title: {
          text: '累计安置方式',
          x: 'center',
          padding: 10,
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: [
          {
            orient: 'vertical',
            right: 30,
            top: 30,
            data: ['居家隔离', '单位隔离', '解除隔离', '预定宾馆隔离', '指定宾馆隔离', '其他']
          }
        ],
        color: [ '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '70%',
            center: ['35%', '55%'],
            data: [
              { value: 2851, name: '居家隔离' },
              { value: 4, name: '单位隔离' },
              { value: 8844, name: '解除隔离' },
              { value: 72, name: '预定宾馆隔离' },
              { value: 1718, name: '指定宾馆隔离' },
              { value: 187, name: '其他' }
            ],
            label: {
              normal: {
                show: false,
                position: 'inside',
                formatter: '{b}:{d}%'
              }
            }
          }
        ]
      }

      myChart.setOption(option)
    },
    snwzy1 () {
      let myChart = echarts.init(document.getElementById('snwzy1'))
      let option = {
        title: {
          text: '省内转运趋势',
          x: 'center',
          padding: 10,
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '15%',
          containLabel: true
        },
        legend: [
          {
            data: ['人数'],
            bottom: 10
          }
        ],
        xAxis: {
          type: 'category',
          data: ['03-15', '03-16', '03-17', '03-18', '03-19', '03-20', '03-21']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [154, 107, 113, 145, 63, 115, 88],
          type: 'line',
          name: '人数'
        }]
      }

      myChart.setOption(option)
    },
    snwzy2 () {
      let myChart = echarts.init(document.getElementById('snwzy2'))
      let option = {
        title: {
          text: '省外转运趋势',
          x: 'center',
          padding: 10,
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '15%',
          containLabel: true
        },
        legend: [
          {
            data: ['人数'],
            bottom: 10
          }
        ],
        xAxis: {
          type: 'category',
          data: ['03-15', '03-16', '03-17', '03-18', '03-19', '03-20', '03-21']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [79, 62, 41, 22, 0, 0, 0],
          type: 'line',
          name: '人数'
        }]
      }

      myChart.setOption(option)
    },
    snwzy3 () {
      let myChart = echarts.init(document.getElementById('snwzy3'))
      let option = {
        title: {
          text: '当日转运详情（省内）',
          x: 'center',
          padding: 10,
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['大连', '鞍山', '抚顺', '本溪', '恒仁', '铁岭', '辽阳', '营口', '阜新', '朝阳', '丹东', '盘锦', '锦州', '葫芦岛'],
          axisLabel: {
            interval: 0, // 强制文字产生间隔
            rotate: 30, // 文字逆时针旋转45°
            textStyle: { // 文字样式
              color: 'black',
              fontSize: 12,
              fontFamily: 'Microsoft YaHei'
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        series: [{
          data: [0, 2, 36, 19, 0, 17, 3, 2, 3, 0, 2, 2, 1, 1],
          type: 'bar',
          itemStyle: {
            normal: {
              color: function (params) {
                var colorList = [ '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ]
                return colorList[params.dataIndex]
              }
            }
          },
          showBackground: true
        }]
      }

      myChart.setOption(option)
    },
    snwzy4 () {
      let myChart = echarts.init(document.getElementById('snwzy4'))
      let option = {
        title: {
          text: '当日转运详情（省外）',
          x: 'center',
          padding: 10,
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['吉林', '黑龙江', '内蒙古', '河北', '江苏', '湖南', '山东', '天津', '陕西', '山西', '河南', '浙江', '北京'],
          axisLabel: {
            interval: 0, // 强制文字产生间隔
            rotate: 30, // 文字逆时针旋转45°
            textStyle: { // 文字样式
              color: 'black',
              fontSize: 12,
              fontFamily: 'Microsoft YaHei'
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        series: [{
          data: [69, 6, 0, 1, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0],
          type: 'bar',
          itemStyle: {
            normal: {
              color: function (params) {
                var colorList = [ '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ]
                return colorList[params.dataIndex]
              }
            }
          },
          showBackground: true
        }]
      }

      myChart.setOption(option)
    },
    xjbggl () {
      let myChart = echarts.init(document.getElementById('xjbggl'))
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        color: [ '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8' ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],

            label: {
              position: 'inner'
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 3, name: '北约客维景国际酒店' },
              { value: 1, name: '沈阳今旅酒店' },
              { value: 1, name: '丽都索菲特' }
            ]
          },
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            data: [
              { value: 0, name: '韩国' },
              { value: 3, name: '日本' },
              { value: 0, name: '伊朗' },
              { value: 0, name: '意大利' },
              { value: 0, name: '其他' },
              { value: 0, name: '韩国' },
              { value: 1, name: '日本' },
              { value: 0, name: '伊朗' },
              { value: 0, name: '意大利' },
              { value: 0, name: '其他' },
              { value: 0, name: '韩国' },
              { value: 1, name: '日本' },
              { value: 0, name: '伊朗' },
              { value: 0, name: '意大利' },
              { value: 0, name: '其他' }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              normal: {
                color: function (params) {
                  // 自定义颜色
                  var colorList = [
                    '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8',
                    '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8'
                  ]
                  return colorList[params.dataIndex]
                }
              }
            }

          }
        ]
      }

      myChart.setOption(option)
    },
    szqk1 () {
      let myChart = echarts.init(document.getElementById('szqk1'))
      let option = {
        title: {
          text: '累计收治人数：341',
          x: 'center',
          padding: 10,
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: [
          {
            orient: 'vertical',
            right: 50,
            top: 90,
            data: ['累计离院', '现有在院']
          }
        ],
        color: [ '#37a2da', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '70%',
            center: ['35%', '55%'],
            data: [
              { value: 320, name: '累计离院' },
              { value: 21, name: '现有在院' }
            ],
            label: {
              normal: {
                show: false,
                position: 'inside',
                formatter: '{b}:{d}%'
              }
            }
          }
        ]
      }

      myChart.setOption(option)
    },
    szqk2 () {
      let myChart = echarts.init(document.getElementById('szqk2'))
      let option = {
        title: {
          text: '床位总数：72',
          x: 'center',
          padding: 10,
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: [
          {
            orient: 'vertical',
            right: 50,
            top: 90,
            data: ['空余床位', '已用床位']
          }
        ],
        color: [ '#37a2da', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '70%',
            center: ['35%', '55%'],
            data: [
              { value: 51, name: '空余床位' },
              { value: 21, name: '已用床位' }
            ],
            label: {
              normal: {
                show: false,
                position: 'inside',
                formatter: '{b}:{d}%'
              }
            }
          }
        ]
      }

      myChart.setOption(option)
    },
    szqk3 () {
      let myChart = echarts.init(document.getElementById('szqk3'))
      let option = {
        title: {
          text: '收治患者国籍分布',
          x: 'center',
          padding: 10,
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: [
          {
            orient: 'vertical',
            right: 50,
            top: 30,
            data: ['中国籍', '韩国籍', '伊朗籍', '意大利籍', '日本籍', '其他国籍']
          }
        ],
        color: [ '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '70%',
            center: ['35%', '55%'],
            data: [
              { value: 334, name: '中国籍' },
              { value: 2, name: '韩国籍' },
              { value: 0, name: '伊朗籍' },
              { value: 0, name: '意大利籍' },
              { value: 1, name: '日本籍' },
              { value: 4, name: '其他国籍' }
            ],
            label: {
              normal: {
                show: false,
                position: 'inside',
                formatter: '{b}:{d}%'
              }
            }
          }
        ]
      }

      myChart.setOption(option)
    },
    init () {
      // 确诊人员信息
      definiteInfoList().then(({ data }) => {
        if (data.errcode === 0) {
          this.definiteInfoList = data.data
        } else {
          Dialog.alert({
            message: data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      // 地图信息
      mapInfoList().then(ret => {
        if (ret.data.errcode === 0) {
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      // 区县疫情信息
      quxianyiqingxinxi().then(ret => {
        if (ret.data.errcode === 0) {
          this.quxianyiqingxinxi = ret.data.data
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      // 全国
      qGNationwideList().then(ret => {
        if (ret.data.errcode === 0) {
          this.countryItem = ret.data.data[0]
          this.countryItem.imp_date = this.timestampToTime(this.countryItem.imp_date)
          console.log(this.countryItem.imp_date)
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      // 全省
      lNNationwideList().then(ret => {
        if (ret.data.errcode === 0) {
          this.provinceItem = ret.data.data[0]
          this.provinceItem.imp_date = this.timestampToTime(this.provinceItem.imp_date)
          console.log(this.provinceItem.imp_date)
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      // 全市
      sYNationwideList().then(ret => {
        if (ret.data.errcode === 0) {
          this.cityItem = ret.data.data[0]
          this.cityItem.imp_date = this.timestampToTime(this.cityItem.imp_date)
          console.log(this.cityItem.imp_date)
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })

      // 疫情趋势
      zxtsList().then(({ data }) => {
        if (data.errcode === 0) {
          let res = data.data
          let xData = []
          let totalData = { blqst: [], zybl: [], pcbl: [], swbl: [], ysbl: [] }
          let addData = { blqst: [], zybl: [], pcbl: [], swbl: [], ysbl: [] }
          res.forEach(item => {
            xData.push(item.md)
            totalData.blqst.push(item.comfirm_num)
            totalData.ysbl.push(item.suspect_num)
            totalData.swbl.push(item.death_num)
            totalData.zybl.push(item.cure_num)
            totalData.pcbl.push(item.exclude_num)
            addData.blqst.push(item.comfirm_num_last)
            addData.ysbl.push(item.suspect_num_last)
            addData.swbl.push(item.death_num_last)
            addData.zybl.push(item.cure_num_last)
            addData.pcbl.push(item.exclude_num_last)
          })
        } else {
          Dialog.alert({
            message: data.errmsg
          })
        }
      })
    }
  },
  mounted () {
    findljqgzsNewList()
    this.init()
    this.gglsry()
    this.glryJZ()
    this.glryJJ()
    this.glryQS()
    this.glbg()
    this.jiance1()
    this.jiance2()
    this.jwrs1()
    this.jwrs2()
    this.jwrs3()
    this.snwzy1()
    this.snwzy2()
    this.snwzy3()
    this.snwzy4()
    this.xjbggl()
    this.szqk1()
    this.szqk2()
    this.szqk3()
  }
}
</script>

<style scoped>
    .content{
        background-color: #efefef;
        height: auto;
    }
    .chart-item-1{
        width: 100%;
        height: 240px;
    }
    .chart-item{
        width: 100%;
        height: 300px;
    }
    .title-item{
        padding: 10px;
        font-size: 14px;
        color: #333333;
    }
    .title-item .left{
        border-left: 5px solid #8b0000;
        padding-left: 5px;
    }
    .title-item .right{
        float: right;
        color: gray;
        font-size: 12px;
    }
    .table-item{
        font-size: 10px;
        text-align: center;
        padding: 0 5px;
        border: 1px solid #dddddd;
        border-top: 0;
    }
    .table-item:first-child{
        border-top: 1px solid #dddddd;
    }
    .table-item:nth-child(2n+1){
        background: #ffffff;
    }
    .van-col {
        padding: 0;
    }
    .table-div{
        padding: 0 10px;
    }
    .table-div .van-col{
        padding: 10px 0;
    }
    .content >>> .van-progress__pivot{
        background-color: initial !important;
        color: #ffffff;
    }
    /*.content >>> .van-progress{*/
    /*    background-color: #dddddd;*/
    /*}*/
    .van-tag{
        margin-right: 1px;
    }
    .content-item{
        padding: 0 10px;
    }
    .content-item .van-row{
        border: 1px solid #dddddd;
        border-radius: 5px;
        padding:10px;
        font-size: 12px;
        background-color: #ffffff;
    }
    .content-item .time-item{
        font-size: 10px;
        text-align: right;
        padding: 10px 0 0 0;
    }
    .content-item>.van-row>.van-col.van-col--4>.van-col.van-col--24{
        padding: 4px 0;
        text-align: center;
    }
    .content-item>.van-row>.van-col.van-col--6>.van-col.van-col--24{
        padding: 4px 0;
        text-align: center;
    }
    .content-item>.van-row>.van-col.van-col--8>.van-col.van-col--24{
        padding: 4px 0;
        text-align: center;
    }
    .content-item>.van-row>.van-col.van-col--4{
        padding: 0 2px;
        width: 20%;
    }
    .content-item>.van-row>.van-col.van-col--6{
        padding: 0 2px;
    }
    .content-item>.van-row>.van-col.van-col--8{
        padding: 0 2px;
    }
    .num{
        font-size: 14px;
    }
    .title-name{
        background: #dddddd;
        font-size: 10px;
    }
    /*.van-col--4 .title-name{*/
    /*    font-size: 10px;*/
    /*}*/
    .add-item{
        font-size: 10px;
    }
    .color-oranged{
        color: orangered;
    }
    .color-orange{
        color: orange;
    }
    .color-green{
        color: rgb(40, 183, 163);
    }
    .color-gray{
        color: gray;
    }
    .color-blue{
        color: rgb(51, 102, 255);
    }
    .table-item .van-col.van-col--4{
        width: 20%;
        font-size: 12px;
    }
    .van-icon.van-icon-chart-trending-o{
        font-size: 14px;
    }
    .diagnosis{
        padding: 0 10px;
    }
    .diagnosis .diagnosis-item{
        padding: 0 2px;
    }
    .diagnosis .van-col.van-col--12 .diagnosis-boder{
        border: 1px solid #8b0000;
        border-top: 5px solid #8b0000;
        padding: 10px;
        font-size: 12px;
        margin-bottom: 5px;
        background-color: #ffffff;
    }
    .diagnosis .van-col.van-col--12 .diagnosis-boder span{
        font-weight: bold;
    }
    .pd{
        padding: 0 0 5px 0;
    }
    .van-row .pd:last-child{
        padding: 0;
    }
    .van-row .pd  .van-col{
        padding: 0;
    }
    .echart{
        background-color: #ffffff;
    }
    .divider{
        width: 100%;
        height: 5px;
        background-color: rgb(204, 204, 204);
        margin: 10px 0 0 0;
    }
    .van-button{
        font-size: 12px;
        padding: 5px;
        height: auto;
        line-height: initial;
        /*width: 100%;*/
    }
    .btn-item{
        border: 0 !important;
        padding: 0 10px !important;
    }
    .btn-item .van-col{
        text-align: center;
    }
    .demo-dialog img{
        box-sizing: border-box;
        width: 100%;
        padding: 25px 20px 0;
    }
    .chart-div {
        padding: 0 10px !important;
    }
    .table-item.van-row .van-col--1 .van-col--12{
        padding: 0;
    }
    .national-flag{
        position: relative;
    }
    .national-flag img{
        position: absolute;
        top: -4px;
    }
    .chart-div .chart-item-2,.chart-div .chart-item-1,.chart-div .chart-item{
        background-color: #ffffff;
    }
    .van-col.van-col--3{
        width: 16%;
    }
    .text-left{
        text-align: left;
    }
    .mb10{
        margin-bottom: 10px;
    }
    .table-item .van-col--1{
        width: 24%;
    }
    .table-item .number{
        width: 19%;
    }
    .border-divider{
        border-bottom: 1px solid rgb(204, 204, 204);
    }
</style>
